<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Agentic AI Performance Dashboard 2025</title>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: #f8f9fa;
            color: #495057;
            margin: 0;
            padding: 1rem;
            line-height: 1.6;
        }
        .container {
            max-width: 100%;
            margin: 0 auto;
        }
        .header {
            text-align: center;
            padding-bottom: 1rem;
            margin-bottom: 1.5rem;
            border-bottom: 1px solid #e9ecef;
        }
        .header h1 {
            font-size: 1.75rem;
            color: #212529;
            margin-bottom: 0.5rem;
        }
        .header p {
            font-size: 1rem;
            color: #6c757d;
            margin: 0;
        }
        .summary-card {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .summary-card h2 {
            font-size: 1.25rem;
            margin-bottom: 0.5rem;
            color: #212529;
        }
        .summary-card .number {
            font-size: 2.5rem;
            font-weight: bold;
            color: #0d6efd;
        }
        .chart-card {
            background-color: #ffffff;
            border: 1px solid #dee2e6;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        }
        .chart-card h3 {
            font-size: 1.1rem;
            margin-top: 0;
            margin-bottom: 1rem;
            text-align: center;
            color: #212529;
        }
        .chart-container {
            position: relative;
            height: 300px;
            width: 100%;
        }
        .grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.5rem;
        }

        @media (min-width: 600px) {
            body {
                padding: 2rem;
            }
            .header h1 {
                font-size: 2rem;
            }
            .grid {
                grid-template-columns: 1fr 1fr;
            }
            .summary-card .number {
                font-size: 3rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Agentic AI Performance Dashboard 2025</h1>
            <p>Focused on Multimodal Processing, Edge Deployment, and Bias Detection</p>
        </div>

        <div class="summary-card">
            <h2>Total Records Processed</h2>
            <div class="number" id="total-records">-</div>
        </div>

        <div class="grid">
            <div class="chart-card">
                <h3>Multimodal Capability Distribution</h3>
                <div class="chart-container">
                    <canvas id="multimodal-chart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <h3>Edge Deployment Environment Distribution</h3>
                <div class="chart-container">
                    <canvas id="edge-chart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <h3>Bias Detection Score Distribution</h3>
                <div class="chart-container">
                    <canvas id="bias-chart"></canvas>
                </div>
            </div>
            <div class="chart-card">
                <h3>Average Bias Detection Score by Model Architecture</h3>
                <div class="chart-container">
                    <canvas id="bias-by-model-chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Sample data based on the provided dataset structure
        // In a real scenario, this would be populated by reading the CSV.
        const totalRecords = 300; // Example count, should be derived from actual data
        
        // Mock data for visualizations
        const multimodalData = {
            labels: ['True', 'False'],
            datasets: [{
                label: 'Multimodal Capability',
                data: [60, 240], // Example: 60 True, 240 False
                backgroundColor: ['#0d6efd', '#adb5bd'],
                hoverOffset: 4
            }]
        };

        const edgeData = {
            labels: ['Edge', 'Server', 'Cloud', 'Hybrid', 'Desktop', 'Mobile'],
            datasets: [{
                label: 'Deployment Environment',
                data: [50, 80, 70, 40, 30, 30], // Example counts
                backgroundColor: [
                    '#198754',
                    '#0d6efd',
                    '#6f42c1',
                    '#fd7e14',
                    '#20c997',
                    '#ffc107'
                ],
                hoverOffset: 4
            }]
        };

        const biasScoreData = {
            labels: ['0.5-0.6', '0.6-0.7', '0.7-0.8', '0.8-0.9', '0.9-1.0'],
            datasets: [{
                label: 'Count of Agents',
                data: [20, 50, 80, 100, 50], // Example counts for score ranges
                backgroundColor: '#6ea8fe',
                borderColor: '#0d6efd',
                borderWidth: 1
            }]
        };

        const modelArchitectureLabels = ['PaLM-2', 'Mixtral-8x7B', 'CodeT5+', 'Falcon-180B', 'Transformer-XL', 'InstructGPT', 'Claude-3.5', 'GPT-4o', 'LLaMA-3', 'Gemini-Pro'];
        const biasByModelData = {
            labels: modelArchitectureLabels,
            datasets: [{
                label: 'Avg. Bias Detection Score',
                data: [0.75, 0.78, 0.82, 0.70, 0.85, 0.80, 0.77, 0.79, 0.81, 0.76], // Example average scores
                backgroundColor: '#cfe2ff',
                borderColor: '#0d6efd',
                borderWidth: 1
            }]
        };

        // Display total records
        document.getElementById('total-records').textContent = totalRecords;

        // Create charts
        new Chart(document.getElementById('multimodal-chart'), {
            type: 'pie',
            data: multimodalData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                }
            }
        });

        new Chart(document.getElementById('edge-chart'), {
            type: 'doughnut',
            data: edgeData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        position: 'bottom',
                    }
                }
            }
        });

        new Chart(document.getElementById('bias-chart'), {
            type: 'bar',
            data: biasScoreData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        title: {
                            display: true,
                            text: 'Number of Agents'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });

        new Chart(document.getElementById('bias-by-model-chart'), {
            type: 'bar',
            data: biasByModelData,
            options: {
                responsive: true,
                maintainAspectRatio: false,
                indexAxis: 'y',
                scales: {
                    x: {
                        beginAtZero: true,
                        max: 1.0,
                        title: {
                            display: true,
                            text: 'Average Score'
                        }
                    }
                },
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    </script>
</body>
</html>